<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
    <head>
        <link rel="shortcut icon" href="../images/metabologo.png" type="image/x-icon" />
        <title>Atom Transition</title>
        <style type="text/css">
        .left-full-height { position:absolute;height: 500px; margin: 0 0; padding: 0 0; width: 575px; left:10px;}
	.right-full-height { position:absolute;height: 500px; margin: 0 0; padding: 0 0; width: 575px; left:580px;}
	.full-repo { position:absolute;top: 510px; margin: 0 0; padding: 0 0; width: 375px; left:10px;}
	.status-label-repo { position:absolute;top: 510px; margin: 0 0; padding: 0 0; width: 375px; left:375px;}
        .track-repo { position:absolute;top: 580px; margin: 0 0; padding: 0 0; width: 375px; left:375px;}
	.left{position:absolute; left:420px;}
	.right{position:absolute; left:700px;}
	p.th {color:rgb(0,0,255);font-weight:bold;text-align:right;}
	.typeahead_wrapper { display: block; height: 30px; }
        </style>
        <SCRIPT type="text/javascript" src="../lib/jquery.js"></SCRIPT>
        <script type='text/javascript' src="lib/jquery.hoverIntent.js"></script>
        <script type='text/javascript' src="lib/underscore-min.js"></script>
        <script type='text/javascript' src="lib/cytoscape.js"></script>
        <script type='text/javascript' src="../lib/arbor.js"></script>
	<link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.css" media="all">
	<script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="../lib/js/typeahead.js"></script>
        <script type='text/javascript' src="lib/node111784_ab_crc.js"></script>	
        <script type='text/javascript' src="js/init_elements.js"></script>
	<script type='text/javascript' src="js/atom_events.js"></script>
	<script type='text/javascript' src="js/graph_plot.js"></script>
        <script type='text/javascript'>
        var sifinTypeAhead = null;
	var cy;
	var rcy;
	var config;
	$(document).ready(function(){  
	    var tempV = ['New York','Cleveland', 'Detroit', 'Seattle', 'Helsinki'];
            sifinTypeAhead = $('#compound_sifin').typeahead({source: tempV, items:20});
	    $("#compound_sifin").css("display","inline");	
	    init_sifin();
	    cy = construct_plot_graph("#cyleft", ileftnodes, ileftlinks);		   
            rcy = construct_plot_graph("#cyright", irightnodes, irightlinks);
	    var leftnodes = cy.nodes();
	    var rightnodes = rcy.nodes();
	    var content = "<table><tr><th><p class='th'><span id='leftc_label'>Glucose</span></p></th><th><p class='th'><span id='rightc_label'>Cholesterol</span></p></th></tr></table><div id='transitions_table'>";
	    content += appendTransitionRows(leftnodes, rightnodes);
	    content += "</div>";
	    $('#attrepo').append(content);

	}); // onload
        </script>
    </head>
    <div id="cymenu">
                Compound&nbsp;<input style="display:block" size="50" name="compound_sifin" id="compound_sifin" placeholder="Type compound name..." data-provide="typeahead">&nbsp;
<button type="submit" name="visCLeft" onclick="visSifLoad('#cyleft')" style="border-color:cornflowerblue;">visLeft</button>&nbsp;<button type="submit" onclick="visSifLoad('#cyright')" id="visCRight" style="border-color:cornflowerblue;">visRight</button>
</div>

<div id="sifload_dialog"></div>
    <div class="left-full-height" id="cyleft"></div>
    <div class="right-full-height" id="cyright"></div>
    <div id="attrepo" class="full-repo"><input type="hidden" value="2457" id="compound1_id"><input type="hidden" id="compound2_id" value="40849"></div>  
    <div><p class='status-label-repo'><span id='status_label'></span></p></div>
    <div id="trackepo" class="track-repo"><textarea rows="2" cols="75" placeholder="Reaction description" id="e2e_descriptionid"></textarea><br><button type="submit" id="attpostadd" value="attpostadd" style="border-color:cornflowerblue;" onClick="visSifPost()">Save</button><input type="hidden" id="atom2atom_id" value=""></div>
</body>
</html>
